import React, { useEffect } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Access, useAccess } from '@umijs/max';
import { Button, Card, Space, Divider, Alert, Spin } from 'antd';
import { UserOutlined, SettingOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

import { PermissionControl, usePermissionCheck } from '@/components/PermissionControl';
import { usePermissionStore } from '@/stores/permissionStore';
import { PERMISSIONS, ROLES } from '@/utils/permissions';

const AccessPage: React.FC = () => {
  const access = useAccess();
  const {
    permissions,
    roles,
    loading,
    error,
    loadPermissions,
    loadRoles,
    refreshPermissions
  } = usePermissionStore();

  // 初始化权限数据
  useEffect(() => {
    if (permissions.length === 0) {
      loadPermissions();
    }
    if (roles.length === 0) {
      loadRoles();
    }
  }, [permissions.length, roles.length, loadPermissions, loadRoles]);

  return (
    <PageContainer
      ghost
      header={{
        title: '权限控制示例',
        subTitle: '展示基于RBAC的权限控制功能',
      }}
    >
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* 权限状态信息 */}
        <Card title="权限状态" size="small">
          {loading && <Spin size="small" />}
          {error && <Alert message={error} type="error" showIcon />}
          <p>当前权限数量: {permissions.length}</p>
          <p>当前角色数量: {roles.length}</p>
          <Button onClick={refreshPermissions} loading={loading}>
            刷新权限
          </Button>
        </Card>

        {/* 基础权限示例 */}
        <Card title="基础权限控制" size="small">
          <Space wrap>
            <Access accessible={access.canSeeAdmin}>
              <Button icon={<UserOutlined />}>只有 Admin 可以看到</Button>
            </Access>

            <PermissionControl permission={PERMISSIONS.USER.VIEW}>
              <Button icon={<EyeOutlined />} type="primary">
                查看用户权限
              </Button>
            </PermissionControl>

            <PermissionControl permission={PERMISSIONS.USER.ADD}>
              <Button icon={<UserOutlined />} type="primary">
                添加用户权限
              </Button>
            </PermissionControl>

            <PermissionControl permission={PERMISSIONS.USER.CHANGE}>
              <Button icon={<EditOutlined />} type="default">
                编辑用户权限
              </Button>
            </PermissionControl>

            <PermissionControl permission={PERMISSIONS.USER.DELETE}>
              <Button icon={<DeleteOutlined />} danger>
                删除用户权限
              </Button>
            </PermissionControl>
          </Space>
        </Card>

        {/* 多权限控制示例 */}
        <Card title="多权限控制" size="small">
          <Space wrap>
            <PermissionControl
              permissions={[PERMISSIONS.USER.VIEW, PERMISSIONS.USER.ADD]}
              requireAll={false}
            >
              <Button type="primary">
                查看或添加用户权限（任一即可）
              </Button>
            </PermissionControl>

            <PermissionControl
              permissions={[PERMISSIONS.USER.VIEW, PERMISSIONS.USER.CHANGE]}
              requireAll={true}
            >
              <Button type="primary">
                查看且编辑用户权限（需要全部）
              </Button>
            </PermissionControl>

            <PermissionControl
              permissions={[
                PERMISSIONS.PERMISSION.VIEW_ROLE,
                PERMISSIONS.PERMISSION.VIEW_PERMISSION
              ]}
              requireAll={false}
            >
              <Button icon={<SettingOutlined />} type="default">
                权限管理（任一权限）
              </Button>
            </PermissionControl>
          </Space>
        </Card>

        {/* 角色控制示例 */}
        <Card title="角色控制" size="small">
          <Space wrap>
            <PermissionControl role={ROLES.SUPER_ADMIN}>
              <Button type="primary" danger>
                超级管理员功能
              </Button>
            </PermissionControl>

            <PermissionControl role={ROLES.ADMIN}>
              <Button type="primary">
                管理员功能
              </Button>
            </PermissionControl>

            <PermissionControl role={ROLES.USER_MANAGER}>
              <Button type="default">
                用户管理员功能
              </Button>
            </PermissionControl>

            <PermissionControl role={ROLES.PERMISSION_MANAGER}>
              <Button type="default">
                权限管理员功能
              </Button>
            </PermissionControl>

            <PermissionControl role={ROLES.VIEWER}>
              <Button>
                查看者功能
              </Button>
            </PermissionControl>
          </Space>
        </Card>

        {/* 权限控制组合示例 */}
        <Card title="权限控制组合" size="small">
          <Space direction="vertical">
            <PermissionControl
              permission={PERMISSIONS.USER.VIEW}
              fallback={<Alert message="您没有查看用户的权限" type="warning" showIcon />}
            >
              <Alert message="您有查看用户的权限" type="success" showIcon />
            </PermissionControl>

            <PermissionControl
              permissions={[PERMISSIONS.USER.ADD, PERMISSIONS.USER.CHANGE, PERMISSIONS.USER.DELETE]}
              requireAll={true}
              fallback={<Alert message="您没有完整的用户管理权限" type="error" showIcon />}
            >
              <Alert message="您拥有完整的用户管理权限" type="success" showIcon />
            </PermissionControl>
          </Space>
        </Card>

        <Divider />

        {/* 调试信息 */}
        <Card title="调试信息" size="small">
          <div>
            <h4>当前权限列表:</h4>
            <pre style={{ fontSize: '12px', background: '#f5f5f5', padding: '8px' }}>
              {JSON.stringify(permissions, null, 2)}
            </pre>

            <h4>当前角色列表:</h4>
            <pre style={{ fontSize: '12px', background: '#f5f5f5', padding: '8px' }}>
              {JSON.stringify(roles, null, 2)}
            </pre>
          </div>
        </Card>
      </Space>
    </PageContainer>
  );
};

export default AccessPage;
